<template>
  <div class="warp container">
  	<div class="header">
      <div class="return-icon" @click="back()"></div>
      <div class="name">
        <span :class="{active : tabIndex == 1 }" @click="tabChange(1)">男频</span>
        <span :class="{active : tabIndex == 2 }" @click="tabChange(2)">女频</span>
      </div>
      <router-link :to="{path:'/search'}" class="search-icon"></router-link>
    </div>


    <div class="classify-list cf">
      <router-link :to="{path:'/typeBook/'+item.id}" class="classify-item" v-for="item in list">
        <div class="layout1-box">
          <img :src="item.cover_pic ? item.cover_pic : errorBookDefaultImg" :onerror="errorBookDefaultImg" class="item-l">
          <div class="item-r">
              <h3 class="item-tt">{{item.class_name}}</h3>
              <p class="item-desc">{{item.novel_number}}本</p>
          </div>
        </div>
      </router-link>
    </div>


    <!-- 底部 -->
      <web-footer active="enjoy"></web-footer>
  </div>
</template>
<script>
    import bookDefaultImg from '@/assets/images/book.png';
    import WebFooter from '../PUBLIC/footer.vue';
    export default {
    	name: 'classify',
    	components: {
        WebFooter
	    },
    	data () {
      		return {
            list:[],
            tabIndex:1,
            errorBookDefaultImg:'this.src="' + bookDefaultImg + '"',
	      	}
	    },
      created(){
          this.tabIndex = this.$route.params.id;
          this.updata();
      },
	    mounted(){

	    },
	    methods:{
	      	back(){
	        	this.$router.go('-1')
	      	},
          tabChange(val){
            if(this.tabIndex == val)return false;
            this.tabIndex = val;
            this.list = [];
            this.updata();
          },
          updata(){
            this.$axios.post(
                this.$store.state.url+"class_list?device_sn="+this.$store.state.device,
                {device_sn:this.$store.state.device,offset:this.page,limit:10,fit_crowd:this.tabIndex}).then(res=>{
                  console.log(res.data);
                  this.list = res.data.list;
            });
          }
	    }
  	}
</script>
<style lang="scss" scoped>
  .header{
    .name span{
      margin:0 20px;
      display: inline-block;
      position: relative;
      line-height: 90px;
      &.active{
        color:#3370ff;
        &:after{
          content:'';
          position: absolute;
          bottom:0;
          left:50%;
          width:40px;
          height:5px;
          margin-left:-20px;
          background-color:#3370ff;
          display: block;
        }
      }
    }
  }
  .classify-list{
    padding:0 50px;
    margin-top:30px;
    .classify-item{
      display: block;
      margin-bottom:70px;
      width:47%;
      margin-right:6%;
      float:left;
      .item-l{
        width:100px;
        margin-right:30px;
      }
      .layout1-box .item-r{
        width:160px;
        .item-desc{
          margin-bottom:0;
        }
      }
    }
    .classify-item:nth-child(2n+2){
      margin-right:0;
    }
  }
</style>
